<template>
	<view class="Body bind_account">
		<view class="Site PageBox">
			<view class="van-nav-bar van-nav-bar--fixed">
				<view class="van-nav-bar__content">
					<view class="van-nav-bar__left" @click="back">
						<u-icon name="arrow-left" color="#fff" size="28rpx"></u-icon>
					</view>
					<view class="van-nav-bar__title van-ellipsis" style="color: #fff;margin-left: 56rpx;">{{common.bind[0]}}</view>
					<view>
					</view>
				</view>
			</view>
			
			<view class="new-list">
				<view class="new-item">
					<text>{{common.bind[2]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.bank_name"
					:placeholder="`${common.bind[15]}${common.bind[2]}`" 
						>
				</view>
				<view class="new-item">
					<text>{{common.news[5]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.swift" 
					:placeholder="`${common.bind[15]}${common.news[5]}`" 
						>
				</view>
				<view class="new-item" style="border-bottom: none;">
					<text>{{common.bind[3]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.card_no" 
					:placeholder="`${common.bind[15]}${common.bind[3]}`"
						>
				</view>
			</view>
			
			<view class="new-list" style="margin-top: 20rpx;">
				<view class="new-item">
					<text>{{common.bind[1]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.guojia" 
					:placeholder="`${common.bind[15]}${common.bind[1]}`"
						>
				</view>
				<view class="new-item">
					<text>{{common.bind[10]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.zhou" 
					:placeholder="`${common.bind[15]}${common.bind[10]}`"
						>
				</view>
				<view class="new-item" style="border-bottom: none;">
					<text>{{common.bind[9]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.citys" 
					:placeholder="`${common.bind[15]}${common.bind[9]}`"
						>
				</view>
			</view>
			
			<view class="new-list" style="margin-top: 20rpx;">
				<view class="new-item">
					<text>{{common.bind[6]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.xingshi" 
					:placeholder="`${common.bind[15]}${common.bind[6]}`" 
						>
				</view>
				<view class="new-item">
					<text>{{common.bind[5]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.mingzi"
					 :placeholder="`${common.bind[15]}${common.bind[5]}`"
						class="">
				</view>
				<view class="new-item">
					<text>{{common.bind[7]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.dizhis"
					:placeholder="`${common.bind[15]}${common.bind[7]}`"
						class="">
				</view>
				<view class="new-item" style="border-bottom: none;">
					<text>{{common.bind[8]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.youbian"
					:placeholder="`${common.bind[15]}${common.bind[8]}`" 
						class="">
				</view>
				<view class="new-item" style="border-bottom: none;">
					<text>{{common.bind[11]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.mobile" 
					:placeholder="`${common.bind[15]}${common.bind[11]}`"
						class="">
				</view>
			</view>
			
			<view class="new-info">
				<image src="../../static/image/my/gantan.png" mode=""></image>
				<view class="info-right">
					<text>{{common.news[6]}}</text>
					
					<text>{{common.bind[12]}}{{common.bind[13]}}</text>
				</view>
			</view>

			

			<!-- <view class="bind_list" style="margin: 5rpx 0;">
				<view class="bind_item">
					<text>{{common.bind[2]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.bank_name" 
					:placeholder="`${common.bind[15]}${common.bind[2]}`" 
						class="van-field__control">
				</view>
				<view class="bind_item">
					<text>{{common.news[5]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.swift" 
					:placeholder="`${common.bind[15]}${common.news[5]}`" 
						class="van-field__control">
				</view>

				<view class="bind_item">
					<text>{{common.bind[3]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.card_no" 
					:placeholder="`${common.bind[15]}${common.bind[3]}`"
						class="van-field__control">
				</view>

				
				<view class="bind_list">
					<view class="bind_item">
						<text>{{common.bind[1]}}</text>
						<input type="text" autocomplete="off" v-model="bindForm.guojia" 
						:placeholder="`${common.bind[15]}${common.bind[1]}`"
							class="van-field__control">
					</view>
				</view>		
				<view class="bind_item">
					<text>{{common.bind[10]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.zhou" 
					:placeholder="`${common.bind[15]}${common.bind[10]}`"
						class="van-field__control">
				</view>
				
				<view class="bind_item">
					<text>{{common.bind[9]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.citys" 
					:placeholder="`${common.bind[15]}${common.bind[9]}`"
						class="van-field__control">
				</view>
				<view class="bind_item">
					<text>{{common.bind[6]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.xingshi" 
					:placeholder="`${common.bind[15]}${common.bind[6]}`" 
						class="van-field__control">
				</view> 
				
				<view class="bind_item">
					<text>{{common.bind[5]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.mingzi"
					 :placeholder="`${common.bind[15]}${common.bind[5]}`"
						class="van-field__control">
				</view>
			</view> -->

			<!-- <view class="bind_list">
				<view class="bind_item">
					<text>{{common.bind[7]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.dizhis"
					:placeholder="`${common.bind[15]}${common.bind[7]}`"
						class="van-field__control">
				</view>
				<view class="bind_item">
					<text>{{common.bind[8]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.youbian"
					:placeholder="`${common.bind[15]}${common.bind[8]}`" 
						class="van-field__control">
				</view>
				
				
				<view class="bind_item">
					<text>{{common.bind[11]}}</text>
					<input type="text" autocomplete="off" v-model="bindForm.mobile" 
					:placeholder="`${common.bind[15]}${common.bind[11]}`"
						class="van-field__control">
				</view>

			</view> -->

			<!-- <view class="bind_tips">
				<text>{{common.news[6]}}</text>
				<br>
				<text>{{common.bind[12]}}</text>
				<text>{{common.bind[13]}}</text>
			</view> -->

			<view class="new-btn" @tap="bindBtn" v-show="isBindBtn">
				{{common.bind[14]}}
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: false,
				isBindBtn: false,
				bindForm: {
					guojia: '',
					bank_name: '',
					card_no: '',
					name: '',
					mingzi: '',
					xingshi: '',
					dizhis: '',
					youbian: '',
					citys: '',
					zhou: '',
					mobile: '',
					swift:''
				},
				token: uni.getStorageSync('token')
			};
		},
		onLoad() {
			this.isBind()
		},

		methods: {
			dumprun(url) {
				uni.navigateTo({
					url
				})
			},

			back() {
				uni.navigateBack(-1)
			},

			bindBtn() {
				if (this.isValid()) {
					this.$u.api.setting.bindAccount(this.token, this.bindForm).then(res => {
						if(res.code == 1){
							uni.showToast({
								title: this.common.bind[17],
								icon: 'none'
							});
							uni.navigateBack(-1)
						}
					})
				}

			},

			isValid() {
				for (const field in this.bindForm) {
					if (this.bindForm[field].trim() === '') {
						uni.showToast({
							title: this.common.bind[16],
							icon: 'none'
						});
						return false;
					}
				}
				return true;
			},
			
			// 查看是否有绑定
			isBind(){
				this.$u.api.setting.isBind(this.token).then(res => {
					if(res.code ==  1){
						this.isBindBtn = false
						for (const key in res.data) {
						  if (this.bindForm.hasOwnProperty(key)) {
						    this.bindForm[key] = res.data[key];
						  }
						}
					}
				}).catch(() => {
					 this.isBindBtn = true
				})
			},
		},
		computed: {
			common() {
				return this.$t("common")
			},
		}
	}
</script>

<style scoped lang="scss">
	.Site .van-nav-bar .van-icon {
		color: #bbb !important;
	}
	
	.PageBox {
		color: #635327;
		padding-top: 40px;
		height: auto;
		// background-color: #1a1a1a !important;
	}

	.van-nav-bar {
		background-color: #1a1a1a !important;
	}

	.van-nav-bar .van-nav-bar__title {
		color: #222;
		font-weight: 700
	}

	.ScrollBox {
		background-color: #2A2D34;
	}

	.van-cell {
		padding: 17rpx 0;
		background-color: #191c23
	}

	.van-cell__title {
		color: #e7e7e7
	}



	.bind_account {
		padding: 30rpx;
		height: auto;
		background-color: #2A2D34;

		.bind_list {
			background-color: #fff;
			border-radius: 10rpx;

			.bind_item {
				padding: 0 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #222;
				height: 76rpx;

				&>text {
					flex-shrink: 0;
				}

				.van-field__control {
					text-align: right;
				}
			}
		}

		.bind_tips {
			height: 80px;
			text-align: center;
			line-height: 60rpx;
			color: #222;

			&>text:last-child {
				color: #ed742e;
			}
		}

		.bind_btn {
			margin: 30rpx 60rpx 0 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 70rpx;
			background-color: #f8ce47;
		}
		
		
	}
	.new-list{
		background-color: #222328;
		padding: 0 32rpx;
		.new-item{
			height: 120rpx;
			
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #67686F;
			text{
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				flex: 1;
			}
			input{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				text-align: right;
			}
		}
	}
	
	.new-info{
		margin-left: 16rpx;
		margin-top: 24rpx;
		width: 720rpx;
		height: 106rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		padding: 0 26rpx;
		image{
			width: 46rpx;
			height: 46rpx;
		}
		.info-right{
			margin-left: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #F24646;
			display: flex;
			flex-direction: column;
		}
	}
	
	.new-btn{
		width: 690rpx;
		height: 88rpx;
		background: #03E4DF;
		border-radius: 8rpx;
		line-height: 88rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #111111;
		margin-top: 60rpx;
		margin-left: 30rpx;
	}
	
</style>